<template>
    <view
        class="member"
        v-if="(marketingPayleMemberDeatile.configPayMemberStatus == 1 || marketingPayleMemberDeatile.openPayMemberStatus == 1) && isShowCard"
        @tap.stop.prevent="toMember"
    >
        <image class="member_bg" src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/vip_bg.png"></image>
        <view class="member_content flex-row-start">
            <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/v.png" class="content_img"></image>

            <!-- 已开通付费会员 -->
            <view class="text_wrap flex_1" v-if="marketingPayleMemberDeatile.openPayMemberStatus == 1">
                <view class="title">{{ marketingPayleMemberDeatile.title }}</view>
                <view class="desc_wrap flex-row-between">
                    <view class="desc" v-if="marketingPayleMemberDeatile.openPayMemberStatus == 1">
                        {{ marketingPayleMemberDeatile.pmLevelInvalidTimeText }}
                    </view>
                    <view class="icon_wrap flex-row-start" @tap="toMember" v-if="marketingPayleMemberDeatile.marketAppUser.pmLevelInvalidTime != -1">
                        <text v-if="marketingPayleMemberDeatile.openPayMemberStatus == 2">立即开通</text>
                        <text v-if="marketingPayleMemberDeatile.openPayMemberStatus == 1">立即续费</text>
                        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/turn 2.png" class="icon"></image>
                    </view>
                </view>
            </view>

            <!-- 无开通付费会员 -->
            <view class="text_wrap flex_1" v-if="marketingPayleMemberDeatile.openPayMemberStatus == 2">
                <view class="title">{{ marketingPayleMemberDeatile.title }}</view>
                <view class="desc_wrap flex-row-between">
                    <view class="desc">{{ marketingPayleMemberDeatile.desc }}</view>

                    <view class="icon_wrap flex-row-start" @tap.stop.prevent="toMember" v-if="marketingPayleMemberDeatile.marketAppUser.pmLevelInvalidTime != -1">
                        <text v-if="marketingPayleMemberDeatile.openPayMemberStatus == 2">立即开通</text>
                        <text v-if="marketingPayleMemberDeatile.openPayMemberStatus == 1">立即续费</text>
                        <image src="http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/static/turn 2.png" class="icon"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// pages/my/components/memberCard/index.ts
import { getPayleMemberDeatile } from '../../api/marketing/marketing';
export default {
    data() {
        return {
            marketingPayleMemberDeatile: {
                configPayMemberStatus: 0,
                openPayMemberStatus: 0,
                title: '',
                pmLevelInvalidTimeText: '',

                marketAppUser: {
                    pmLevelInvalidTime: ''
                },

                desc: ''
            },
            isShowCard: true
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        cardMsg: String
    },
    mounted() {
        // 处理小程序 attached 生命周期
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    /**
     * 组件的方法列表
     */
    methods: {
        init: function () {
            // 在组件实例进入页面节点树时执行
            this.getPayleMemberDeatile();
        },

        toMember() {
            getApp().globalData.CHECK_LOGIN(() => {
                // 开通了付费会员去详情
                if (this.marketingPayleMemberDeatile.openPayMemberStatus == 1) {
                    uni.navigateTo({
                        url: '/marketing_page/pages/member/index/index?type=1'
                    });
                } else {
                    uni.navigateTo({
                        url: '/marketing_page/pages/member/index/index'
                    });
                }
            });
        },

        toMemberWrap() {},

        // 付费会员栏和已开通付费信息
        async getPayleMemberDeatile() {
            try {
                let res = await getPayleMemberDeatile({
                    plUserId: uni.getStorageSync('memberId')
                });
                let marketingPayleMemberDeatile = res.data || {};
                // 处理会员卡片数据
                console.log(marketingPayleMemberDeatile, '会员卡片信息....');

                // 判断后台是否配置付费会员 || 判断有无开通付费会员设置不同的会员显示协议  1开通 2未开通
                if (marketingPayleMemberDeatile.configPayMemberStatus == 1 || marketingPayleMemberDeatile.openPayMemberStatus == 1) {
                    let title = ''; //卡片标题
                    let desc = ''; //卡片权益说明
                    let descArr = []; //权益数组
                    let pmLevelInvalidTimeText = ''; //会员到期文字
                    let { marketAppUser, highestPayRule } = marketingPayleMemberDeatile;
                    // 判断有无开通付费会员设置不同的会员显示协议  1开通 2未开通
                    if (marketingPayleMemberDeatile.openPayMemberStatus == 1) {
                        title = this.generateText(marketAppUser.currentPayleOrder);
                        // 设置会员到期文字
                        if (marketingPayleMemberDeatile.marketAppUser.pmLevelInvalidTime == -1) {
                            pmLevelInvalidTimeText = '永久会员';
                        } else {
                            pmLevelInvalidTimeText = marketingPayleMemberDeatile.marketAppUser.pmLevelInvalidTime.split(' ')[0];
                        }
                        if (this.cardMsg == 'siteDelPage') {
                            console.log('站点详情开通后不展示卡片111111111');
                            this.setData({
                                isShowCard: false
                            });
                        }
                    } else {
                        title = '开付费会员更省';
                        desc = this.generateText(highestPayRule);
                        if (this.cardMsg == 'siteDelPage') {
                            console.log('站点详情没开通后展示卡片22222222');
                            this.setData({
                                isShowCard: true
                            });
                        }
                    }

                    //   if(this.data.cardMsg == 'siteDelPage' && marketingPayleMemberDeatile.openPayMemberStatus == 1){
                    //       this.data.isShowCard = false
                    //   }

                    marketingPayleMemberDeatile.title = title;
                    marketingPayleMemberDeatile.desc = desc;
                    marketingPayleMemberDeatile.pmLevelInvalidTimeText = pmLevelInvalidTimeText;
                }
                this.setData({
                    marketingPayleMemberDeatile
                });
            } catch (error) {}
        },

        // 处理会员卡片权益文字
        generateText(data: any): string {
            console.log(data, 'teesttt');
            let title = ''; //卡片标题
            let descArr = []; //权益数组
            //权益周期 1每月 2每周
            let descPeriod = data.payLevelType == 1 ? '每月' : data.payLevelType == 2 ? '每周' : '';
            title = '';
            // 判断是否有服务费折扣
            if (data.payLevelServeDiscount) {
                descArr.push(`服务费${(((data.payLevelServeDiscount || 0) * 100) / 10).toFixed(1)}折`);
            }
            // 判断是否有免服务费次数
            if (data.serveFreeTimes) {
                descArr.push(`${descPeriod}服务费次数${data.serveFreeTimes}次`);
            }
            // 判断是否有赠送优惠券
            if (data.marketCouponOptionApplies && data.marketCouponOptionApplies.length) {
                descArr.push(`${descPeriod}优惠券${data.marketCouponOptionApplies.length}张`);
            }
            // 判断是否有赠送奖励金
            if (data.rewardAmount) {
                descArr.push(`${descPeriod}奖励金${data.rewardAmount}元`);
            }
            // 判断是否有赠送积分
            if (data.rewardIntegral) {
                descArr.push(`${descPeriod}赠送${data.rewardIntegral}积分`);
            }
            title += descArr.join('、');
            if (title) {
                title = '享' + title;
            }
            return title;
        }
    },
    created: function () {}
}
</script>
<style lang="less">
@import '../../commin/flex.less';
.text_wrap {
    width: 70%;
}
.member {
    position: relative;
    height: 129rpx;
    width: 100%;
    box-sizing: border-box;

    .member_bg {
        position: absolute;
        height: 129rpx;
        width: 100%;
        left: 0;
        top: 0;
    }

    .member_content {
        position: absolute;
        height: 129rpx;
        width: 100%;
        z-index: 1;
        /* padding: 0 32rpx;*/
        /* padding-left: 32rpx;*/
        box-sizing: border-box;

        .content_img {
            width: 56rpx;
            height: 53rpx;
            /* margin-right: 24rpx;*/
            margin: 0 24rpx;
        }

        .title {
            font-size: 24rpx;
            font-family: DOUYU;
            font-weight: normal;
            color: #ffffff;
            margin-bottom: 12rpx;
            width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .desc {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fddf91;
            width: 410rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* text{*/
            /*     white-space: nowrap;*/
            /* }*/
        }

        .icon_wrap {
            margin-right: 10rpx;
            text {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #fddf91;
                margin-right: 17rpx;
            }

            .icon {
                width: 12rpx;
                height: 19rpx;
            }
        }
    }
}
</style>
